.container {
	position: relative;
	padding-bottom: env(safe-area-inset-bottom);

	.b-radius {
		border-radius: rpx(20);
	}

	.toTop {
		top: 0;
		left: 0;
		right: 0;
	}

	.header {
		z-index: 9;
		position: fixed;
		padding: 0 rpx(30);
		@extend .toTop;
		transition: all 0.5s;
		display: flex;
		align-items: center;
		background-image: radial-gradient(farthest-side at 2% 0%, rgba($uni-color-primary, 0.8), white);

		.address {
			color: #2c405a;
			font-size: rpx(30);
			display: flex;
			align-items: center;
			font-weight: 600;

			text {
				font-size: rpx(25);
				padding-left: rpx(10);
			}

			.more {
				font-size: rpx(20);
				margin-left: rpx(10);
			}
		}
	}

	.main {
		position: relative;

		.wrapper,
		.list-content {
			z-index: 1;
			position: relative;
		}

		.wrapper {
			padding: rpx(20) rpx(30) 0 rpx(30);

			.theme-map {
				position: relative;
				width: 100%;
				height: rpx(620);
				background-color: #dedede;
				margin-bottom: rpx(30);
				box-shadow: 0 rpx(20) rpx(60) 0 #7088d21a;
				transform: translateY(0);
				overflow: hidden;

				.map {
					z-index: 8;
					position: relative;
					width: 100%;
					height: rpx(520);
				}

				.theme-map-footer {
					z-index: 9;
					position: absolute;
					left: 0;
					right: 0;
					bottom: rpx(-10);
					padding: rpx(25);
					background-color: white;

					.status {
						z-index: 9;
						position: absolute;
						right: rpx(20);
						top: rpx(20);
						width: rpx(15);
						height: rpx(15);
						border-radius: rpx(15);
						background-color: #4cd964;
					}

					.item {
						padding: rpx(20);
						font-size: rpx(26);
						box-sizing: border-box;
					}

					.mark {
						display: flex;
						align-items: center;
						font-weight: 500;

						&.primary {
							&::before {
								background-color: $uni-color-primary;
							}
						}

						&.green {
							color: #008080;

							&::before {
								background-color: #008080;
							}
						}

						&::before {
							content: " ";
							width: rpx(15);
							height: rpx(15);
							margin-right: rpx(20);
							border-radius: rpx(15);
							display: inline-block;
						}
					}

					.item {
						text-align: center;
					}

					.appointment {
						position: relative;
						width: 100%;
						height: rpx(100);
						margin-top: rpx(20);
						font-size: rpx(30);
						font-weight: 600;
						color: $uni-text-color;
						background-color: $uni-text-color-grey;

						.make {
							position: absolute;
							right: rpx(20);
							width: rpx(300);
							border-radius: rpx(10);
							height: rpx(80);
							font-size: rpx(24);
							color: #333;
							line-height: rpx(80);
							background-color: white;
						}
					}
				}
			}

			.activities {
				position: relative;
				width: 100%;
				padding: rpx(30);
				box-sizing: border-box;
				@extend .b-radius;
				background-color: white;
				box-shadow: 0 rpx(20) rpx(60) 0 #7088d21a;

				.title {
					font-size: rpx(40);
					font-weight: 600;
					color: $uni-text-color;
				}

				.subtitle {
					font-size: rpx(24);
					color: $uni-text-color-placeholder;
					line-height: 2;
				}

				.more {
					position: absolute;
					right: rpx(30);
					bottom: rpx(30);
					color: $uni-color-primary;
					font-size: rpx(24);
					font-weight: 500;
				}
			}

			.message {
				height: rpx(50);
				padding: rpx(20);
				background-color: white;
				box-shadow: 0 rpx(20) rpx(60) 0 #7088d21a;
				@extend .b-radius;
				overflow: hidden;
				display: flex;
				align-items: center;
				color: #333333;

				.icon {
					width: rpx(60);
					height: rpx(50);
					display: flex;
					font-size: rpx(35);
					padding-right: rpx(20);
					align-items: center;
					justify-content: center;
					color: #333333;
					border-right: 1px solid rgba(133, 133, 133, 0.1);
				}

				.text {
					font-size: rpx(26);
					padding-left: rpx(20);
				}
			}

			.menus {
				margin-top: rpx(20);
			}

			.menu {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

				.menu-item {
					flex: 1;
					width: rpx(140);
					min-width: rpx(140);
					height: rpx(140);
					display: inline-block;
					margin: rpx(20) 0;
					text-align: center;

					@for $i from 1 through 10 {
						&:nth-child(#{$i}) {
							.icon {
								background-image: url("../../static/images/menus/icon-#{$i}@2x.png");
							}
						}
					}

					.icon {
						width: rpx(58);
						height: rpx(58);
						margin: 0 auto;
						background-image: url("../../static/images/icon@2x.png");
						background-size: cover;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						font-size: rpx(22);
						padding-top: rpx(20);
						color: $uni-color-subtitle;
					}
				}
			}

			.gift {
				width: 100%;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				padding-top: rpx(20);

				.gift-cont {
					position: relative;
					width: rpx(88);
					height: rpx(88);

					.gift-item {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: rpx(60);
						height: rpx(60);
						background-size: cover;
						background-image: url("../../static/images/envelope.png");
					}

					&:nth-child(1) {
						.gift-item {
							filter: grayscale(100%);
						}
					}

					&:nth-child(2) {
						.gift-item {
							width: rpx(88);
							height: rpx(88);
						}
					}
				}
			}

			.notes {
				position: relative;
				width: 100%;
				padding: rpx(20);
				border-radius: rpx(10);
				margin-top: rpx(20);
				font-size: rpx(24);
				box-sizing: border-box;
				color: #555;
				background-color: #f3f3f3;

				.more {
					position: absolute;
					top: 50%;
					right: rpx(20);
					font-weight: 500;
					color: #555;
					transform: translateY(-50%);
				}
			}
		}

		.markBackgroundColor {
			z-index: 0;
			position: absolute;
			@extend .toTop;
			width: 100%;
			height: rpx(350);
			background-image: linear-gradient(10deg, #f8f8f8 18%, #e2d9d1 100%);
			background-position: bottom;
			background-size: 100%;
		}
	}
}
